import React, { useEffect } from 'react'
import './capital-type.scss'
import moment from 'moment'
import useKeepState from 'use-keep-state'
import CreateType from './craete-type'
import { Table, Button, Tag, Popconfirm } from 'antd'
import {
  serviceGetCapitalFlowType,
  serviceDeleteCapitalFlowType,
} from '../../../request/capitalflow'
import { TypeNames, TypeColors } from './enum'

const initialState = {
  showCreateTypeModal: false,
  selectedRowKeys: [],
  loading: false,
  data: [],
  rowData: null,
}

const CapitalType: React.FC = function () {
  const [state, setState] = useKeepState(initialState)
  function getCapitalFlowType() {
    serviceGetCapitalFlowType().then(res => {
      if (res.data.success) {
        const data = res.data.data.map((item: any) => {
          item.typeName = TypeNames[item.type]
          item.color = TypeColors[item.type]
          item.createdAt = moment(item.createdAt).format('YYYY-MM-DD hh:mm')
          return item
        })
        setState({ data })
      }
    })
  }
  function deleteCapitalFlowType() {
    const ids = state.selectedRowKeys.join()
    if (!ids) return
    setState({ loading: true })
    serviceDeleteCapitalFlowType(ids)
      .then(res => {
        if (res.data.success) getCapitalFlowType()
      })
      .finally(() => {
        setState({ loading: false })
      })
  }
  function handleEdit(rowData: any) {
    setState({
      showCreateTypeModal: true,
      rowData,
    })
  }
  function handleOnSuccess() {
    setState({ showCreateTypeModal: false })
    getCapitalFlowType()
  }
  function handleAdd() {
    setState({
      showCreateTypeModal: true,
      rowData: null,
    })
  }
  const rowSelection = {
    selectedRowKeys: state.selectedRowKeys,
    onChange(selectedRowKeys: any) {
      setState({ selectedRowKeys })
    },
  }
  const tableColumns = [
    {
      title: '账务类型',
      dataIndex: 'name',
    },
    {
      title: '收支类别',
      align: 'center',
      render: (rowData: any) => (
        <Tag color={rowData.color}>{rowData.typeName}</Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      render: (rowData: any) => (
        <Button onClick={handleEdit.bind(null, rowData)}>编辑</Button>
      ),
    },
  ]
  useEffect(() => {
    getCapitalFlowType()
  }, [])

  return (
    <div className="capital-flow-type">
      <div className="button-group">
        <Popconfirm
          title="您确定要删除吗？"
          onConfirm={deleteCapitalFlowType}
          placement="bottomLeft"
          okType="danger"
        >
          <Button type="primary" danger>
            删除
          </Button>
        </Popconfirm>
        <Button type="primary" onClick={handleAdd}>
          新增
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={tableColumns as any[]}
        dataSource={state.data}
        pagination={false}
        rowKey="id"
        loading={state.loading}
      ></Table>
      <CreateType
        visible={state.showCreateTypeModal}
        rowData={state.rowData}
        onSuccess={handleOnSuccess}
        onCancel={() => setState({ showCreateTypeModal: false })}
      ></CreateType>
    </div>
  )
}

export default CapitalType
